import { Box, Loading, ResponsiveGrid, Search } from '@alifd/next';
import { useLocation, useRequest } from 'ice';
import { getReceiveShippingDetail, getReceiveShippingDetailByNo, getAppraisalDetail, getDeliveryDetail } from './service';
import OrderDetail from '@/pages/OperationCenter/LogisticsDetail/components/Order';
import ReceiveLogDetail from '@/pages/OperationCenter/LogisticsDetail/components/ReceiveLog';
import DeliveryLogDetail from '@/pages/OperationCenter/LogisticsDetail/components/DeliveryLog';
import ReceiveDetail from '@/pages/OperationCenter/LogisticsDetail/components/Receive';
import AppraisalDetail from '@/pages/OperationCenter/LogisticsDetail/components/Appraisal';
import { useIntl } from 'react-intl';
import TableEmptyBlock from '@/components/TableEmptyBlock';
import { useMemo } from 'react';

const { Cell } = ResponsiveGrid;

interface RouterState {
  shippingId: number;
  shippingLabel: string;
  // receiving 收货详情 delivery 发货详情  appraisal 鉴定
  type: 'receiving' | 'receivingScan' | 'delivery' | 'appraisal' | 'appraisalScan';
}

const apiObj = {
  receiving: getReceiveShippingDetail,
  receivingScan: getReceiveShippingDetailByNo,
  delivery: getDeliveryDetail,
  appraisal: getAppraisalDetail,
  appraisalScan: getReceiveShippingDetail,
};

const Logistics = () => {
  const intl = useIntl();
  const { state } = useLocation<RouterState>();
  const { data, loading, request } = useRequest(apiObj[state?.type], {
    manual: state?.type?.includes('Scan'),
    defaultParams: [state?.shippingId || state?.shippingLabel],
    initialData: {},
  });

  const handleSearch = (value: string) => {
    request(value);
  };

  const renderDetail = useMemo(() => {
    let details: JSX.Element[] = [<OrderDetail {...data} key="1" />];
    if (state?.type.includes('receiving')) {
      details = details.concat(
        <div key="2">
          <ReceiveLogDetail {...data} />
        </div>,
        <ReceiveDetail {...data} key="3" />,
      );
    }
    if (state?.type.includes('appraisal')) {
      if (!data?.result) {
        details.push(<div key="2"><ReceiveDetail isPreview {...data} /></div>);
      }
      details.push(<div key="3"><AppraisalDetail isPreview={!!data?.result} {...data} /></div>);
    }
    if (state?.type.includes('delivery')) {
      details.push(<div key="2"><DeliveryLogDetail isPreview {...data} /></div>);
    }
    return details;
  }, [state?.type, data]);

  return (
    <ResponsiveGrid>
      <Cell colSpan={12}>
        <div style={{ marginBottom: 15, textAlign: 'center' }} hidden={!state?.type?.includes('Scan')}>
          <Search
            type="primary"
            placeholder="请输入物流单号"
            hasClear
            hasIcon={false}
            searchText={intl.formatMessage({ id: 'btn.search' })}
            onSearch={handleSearch}
            size="large"
          />
        </div>
        <Loading visible={loading} style={{ width: '100%' }}>
          {data && data.shippingId ? (
            <Box spacing={30}>
              {renderDetail}
            </Box>
          ) : (
            <TableEmptyBlock />
          )}
        </Loading>
      </Cell>
    </ResponsiveGrid>
  );
};

export default Logistics;
